<template>
    <div>
        <el-form :model="form" label-width="120px">
            <el-form-item label="姓名">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="心愿">
                <el-input v-model="form.region" />
            </el-form-item>


            <el-form-item label="头像">
                <el-radio-group v-model="form.tx">
                    <el-radio label='1.jpg'>

                        <div class="go">
                            <img src="1.jpg"
                                alt="">
                        </div>

                    </el-radio>
                    <el-radio label='2.jpg'>
                        <div class="go">
                            <img src="2.jpg" alt="">
                        </div>

                    </el-radio>
                    <el-radio label='3.jpg'>
                        <div class="go">
                            <img src="3.jpg" alt="">
                        </div>
                    </el-radio>

                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="xip">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useStore } from 'vuex';

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    tx: '',
    time: new Date().toLocaleString()
})
const stater = useStore()

const onSubmit = () => {
    if (form.name==''||form.region==""||form.tx=='') {
        return alert('不能为空')
    }
    let obj = { ...form }
    console.log(obj)
    stater.commit('add', obj)
}

const xip = () => {
    form.name = form.region = form.resource = ""
}
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.go {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>